<template>
  <div class="h-100 flex-column">
    <el-form :inline="true" :model="filterData" class="demo-form-inline search">
      <el-form-item>
        <el-button :disabled="!filterData.parentId" type="primary" @click="edit()">
          新增字典值
        </el-button>
      </el-form-item>
    </el-form>
    <div id="table_contain" class="flex-100">
      <Table
        :height="tableHeight"
        :columns="tableData.columns"
        v-loading="tableData.loading"
        :data="tableData.data"
      >
        <template #state="{ row }">
          {{ row.state == 1 ? '启用' : '禁用' }}
        </template>
        <template #edit="{ row }">
          <el-button size="small" :icon="Edit" type="warning" plain @click="edit(row)">
            编辑
          </el-button>
          <el-button size="small" :icon="Delete" type="danger" plain @click="del(row)">
            删除
          </el-button>
        </template>
      </Table>
    </div>
    <!--
    <Page
      :page-data="pageData"
      :total="tableData.total"
      @page-no-change="(pageNum) => (pageData.pageNum = pageNum)"
      @page-size-change="(pageSize) => (pageData.pageSize = pageSize)"
    />
    -->
    <DictEditForm
      v-model:visible="editFormVisible"
      v-model:data="rowData"
      type="2"
      @submit="getTableData"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { deleteDict, selectDict, selectSysDictByParentId } from '@/api/system'
import Table from '@/components/CustomTable'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete, Edit } from '@element-plus/icons-vue'
import DictEditForm from '@/views/systemManage/dictionary/components/DictEditForm.vue'
import { bus } from '@/utils'
import { useCalcTableHeight } from '@/hooks/useCalcTableHeight'

let rowData: any
const editFormVisible = ref<boolean>(false)
const { tableHeight } = useCalcTableHeight()
let filterData = reactive({ name: '', code: '', parentId: '' })
const pageData = reactive({
  pageSize: 15,
  pageNum: 1
})
const tableData = reactive({
  columns: [
    { type: 'index' },
    { prop: 'state', label: '状态', width: 60, template: true },
    { prop: 'name', label: '名称', width: 200 },
    { prop: 'code', label: '字典值', width: 160 },
    { prop: 'sort', label: '字典排序', width: 160 },
    { prop: 'remark', label: '说明', width: 160 },
    { prop: 'edit', label: '操作', width: 200, template: true, fixed: 'right' }
  ],
  loading: false,
  total: 0,
  data: []
})

async function getTableData() {
  const parentId = filterData?.parentId
  tableData.loading = true
  const { data, success, msg } = await selectSysDictByParentId(parentId)
  if (!success) {
    ElMessage.error(msg)
    return
  }
  tableData.loading = false
  tableData.data = data || []
  tableData.total = data?.total || 0
}

async function edit(row?: any) {
  if (!row) {
    rowData = reactive({ parentId: filterData?.parentId })
    console.log(rowData)
    editFormVisible.value = true
    return
  }
  const { data, success } = await selectDict(row?.id)
  if (!success) {
    return
  }
  rowData = reactive(data)
  editFormVisible.value = true
}

async function del(row: any) {
  ElMessageBox.confirm(`是否删除${row.name}?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    tableData.loading = true
    const { success, msg } = await deleteDict(row?.id)
    if (!success) {
      tableData.loading = false
      ElMessage.error(msg)
      return
    }
    ElMessage.success('操作成功')
    await getTableData()
  })
}

watch(pageData, async () => {
  // await getTableData();
})

watch(filterData, async () => {
  pageData.pageNum = 1
  await getTableData()
})

onMounted(async () => {
  bus.on('searchDictValue', (dictId: string | any) => (filterData.parentId = dictId || null))
})
</script>

<style scoped lang="scss"></style>
